<template>
  <div id="primaryService">
    <!-- 头部 -->
    <div class="header">
      <Headers></Headers>
    </div>
    <div class="concent">
      <div class="concent_img">
        <img src="https://dus-company-log-img.oss-cn-beijing.aliyuncs.com/3/16750717285661674030224960%E6%9C%8D%E5%8A%A1%E4%B8%BB%E5%9B%BE%20(1).jpg" alt="" style="width:100%">
      </div>
      <div>
        <div class="swiper">
          <div class="swiper_header">
            <div style="text-align: center;">
              <van-icon name="arrow-left" @click="leftclick()" :class="[TabCut == 0 ? 'tab_size_1' : 'tab_size_else' ]" style="padding: 0rem 3rem 0rem 0rem;" />
              <span v-show="TabCut == 0">生物医药服务</span>
              <span v-show="TabCut == 1">医学检测服务</span>
              <span v-show="TabCut == 2">诊断试剂服务</span>
              <span v-show="TabCut == 3">医疗器械服务</span>
              <span v-show="TabCut == 4">临床供应链服务</span>
              <van-icon name="arrow" :class="[TabCut == 4 ? 'tab_size_1' : 'tab_size_else' ]" style="padding: 0rem 0rem 0rem 3rem;" @click="rightclick()" />
            </div>
          </div>
          <div>
            <div class="swiper_content">
              <div v-show="TabCut == 0">
                <div class="swiper_size">
                  需要借助冷链环境进行存储、运输的药品，主要包括疫苗、细胞因子、酶制剂、血液制品、诊断试剂等生物制品，部分抗生素、抗肿瘤药物、眼用制剂等，也属于冷链药品之内。<br />
                  时效和温度要求高的生物药品，对于风险控制，路由设计，服务响应有非常高的要求。我们可以根据医药客户的不同特点和需求，提供多层次的供应链解决方案和灵活的定制化服务。可提供保温箱: +15°C~+25°C、+2°C~+8°C 、-25°C~-15°C、干冰:-90°C~-60°C等精准温控物流服务。
                </div>
                <div class="swiper_img">
                  <img src="https://dus-company-log-img.oss-cn-beijing.aliyuncs.com/5/1674029901705%E7%94%9F%E7%89%A9%E5%8C%BB%E8%8D%AF.jpg" alt="" srcset="" style="width: 100%;">
                </div>
              </div>
              <div v-show="TabCut == 1">
                <div class="swiper_size">
                  医学检测样本包括:血液样本 (全血、血浆、血清、血小板等)、组织样本、核酸和蛋白质样本、细胞样本、组织切片和组织芯片。<br />
                  医学检测行业对温度、时效、生物安全、检验知识等有特殊性要求，每个客户都有个性化的服务需求。我们能从城市的各个角落收集样本，可以帮助医学检测实验室提高业务覆盖区域的服务深度和响应效率，为基层提供快捷的临床检验服务。我们会把握科技发展趋势，共同打造一个支撑多品类、多业态、大纵深、快速服务响应的医学检验运输管理系统，提高客户满意度和企业竞争力。
                </div>
                <div class="swiper_img">
                  <img src="https://dus-company-log-img.oss-cn-beijing.aliyuncs.com/4/1674029631209%E5%8C%BB%E5%AD%A6%E6%A3%80%E6%B5%8B.jpg" alt="" srcset="" style="width: 100%;">
                </div>
              </div>

              <div v-show="TabCut == 2">
                <div class="swiper_size">
                  体外诊断试剂是实验室进行检测时所用到的试剂类产品，主要包括诊断试剂、校准材料和控制材料等。<br />
                  体外诊断试剂的运输保存都需要严格控制温度，通常要求在+2~+8°C或-20°C等温度下运输，保证全程冷链。<br />
                  为保证试剂质量的稳定性，从生产到使用前的每一个环节都需要符合冷链管理要求，做好冷链运输才能保证体外诊断试剂的准确性和有效性。<br />
                </div>
                <div class="swiper_img">
                  <img src="https://dus-company-log-img.oss-cn-beijing.aliyuncs.com/4/1674029968543525f58cf2fc83031c2c53f694fb4d73.jpg" alt="" srcset="" style="width: 100%;">
                </div>

              </div>
              <div v-show="TabCut == 3">
                <div class="swiper_size">
                  我们了解医疗器械的实际运作场景，可以为运输提供全程温度监控，具有处理运输过程中突发事件的应急能力。<br />
                  我们通过质量管控和信息化追溯系统，对医疗器械运输进行标准化管理。
                </div>
                <div class="swiper_img">
                  <img src="https://dus-company-log-img.oss-cn-beijing.aliyuncs.com/5/1674029809253%E5%8C%BB%E7%96%97%E5%99%A8%E6%A2%B0.jpg" alt="" srcset="" style="width: 100%;">
                </div>

              </div>
              <div v-show="TabCut == 4">
                <div class="swiper_size">
                  处理和运输临床试验阶段的研究性医药产品和样本，可以提供经过验证及预处理的温控包装箱，无论是液氮，干冰或保温箱的运输服务，我们能够提供合规的量身定制的供应链解决方案，满足临床试验领域的特定需求。我们将不遗余力地服务于临床试验领域的客户，并提升供应链服务质量。
                </div>
                <div class="swiper_img">
                  <img src="https://dus-company-log-img.oss-cn-beijing.aliyuncs.com/0/1676529276165server004.png" alt="" srcset="" style="width: 100%;">
                </div>

              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 底部 -->
    <div class="footer">
      <Footer></Footer>
    </div>
  </div>
</template>
  <script>
import Headers from "../components/headers.vue"
import Footer from "../components/footer.vue"
import { ref } from "vue"
export default {
  name: "primaryService",
  setup() {
    const TabCut = ref(0)
    return { TabCut }
  },
  components: {
    Headers,
    Footer
  },
  methods: {
    leftclick() {
      console.log(this.TabCut, "函数调用")
      if (this.TabCut > 0) {
        console.log("函数调用")
        this.TabCut = this.TabCut - 1
      }

    },
    rightclick() {
      console.log(this.TabCut, "函数调用")
      if (this.TabCut < 4) {
        this.TabCut = this.TabCut + 1
      }
    }
  }
}
  </script>
  <style scoped>
.swiper {
  width: 90%;
  margin: 0 auto;
}
.swiper_header {
  width: 100%;
  height: 2rem;
  background: white;
  margin: 2rem 0rem 1.5rem 0rem;
}
.swiper_content {
  line-height: 2rem;
  text-align: justify;
}
.tab_size_1 {
  color: #bebebe;
 
}
.tab_size_else {
  color: #1b1b1b;
}
.swiper_img{
  margin: 2rem 0rem 0rem 0rem;
}
.footer{
  background: black;
  padding: 1rem 0rem 0.1rem 0rem;
  margin: 2rem 0rem 0rem 0rem;
}
</style>